<template>
  <div>
    <el-row>
      <el-button type="primary" style="text-align:left" @click="dialogVisible = true" round>新增</el-button>
    </el-row>
    <el-table :data="testData" style="width: 100%">
      <el-table-column prop="productsId" label="productsId">
      </el-table-column>
      <el-table-column prop="productsName" label="productsName">
      </el-table-column>
      <el-table-column prop="productsNum"
                       label="productsNum"
                       width="180">
      </el-table-column>
      <el-table-column prop="productsDesc" label="productsDesc" width="180">
      </el-table-column>
      <el-table-column prop="categoryId" label="categoryId">
      </el-table-column>
      <el-table-column prop="price" label="price">
      </el-table-column>
      <el-table-column>
        <template slot-scope="scope">
          <el-row>
            <el-button type="danger" @click="ondel(scope.row.productsId)" icon="el-icon-delete" circle></el-button>
          </el-row>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog title="请输入各字段的值"
               :visible.sync="dialogVisible"
               width="30%"
               :before-close="handleClose"
               style=" text-align: left; ">
      <p>productsName</p>
      <el-input v-model="NproductsName" placeholder="请输入内容"></el-input>
      <p>productsNum</p>
      <el-input v-model="NproductsNum" placeholder="请输入内容"></el-input>
      <p>productsDesc</p>
      <el-input v-model="NproductsDesc" placeholder="请输入内容"></el-input>
      <p>categoryId</p>
      <el-input v-model="NcategoryId" placeholder="请输入内容"></el-input>
      <p>price</p>
      <el-input v-model="Nprice" placeholder="请输入内容"></el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="onsmit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import axios from 'axios'
  export default {
    data() {
      return {
        dialogVisible: false,
        testData: [{}],
        NproductsName: "",
        NproductsNum: "",
        NproductsDesc: "",
        NcategoryId: "",
        Nprice: "",
      }
    },
    methods: {
      ondel(row){
        axios.delete("http://47.110.234.216:7001/delete-pros", {
          data: {
            productsId: row
          }
        }).then(res => {
          if (res.data.status) {
            this.$message({
              message: '删除成功！',
              type: 'success'
            });
          }
          else {
            this.$message.error('删除失败');
          }
        })
        setTimeout("location.reload()", "2000");
  },
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => { });
      },
      onsmit() {
        this.dialogVisible = false;
        const that = this;
        console.log(that.NproductsName);
        axios.post("http://47.110.234.216:7001/add-pros", {
          productsName: that.NproductsName,
          productsNum: that.NproductsNum,
          productsDesc: that.NproductsDesc,
          categoryId: that.NcategoryId,
          price: that.Nprice
        }).then(res => {
          if (res.data.status) {
            this.$message({
              message: '更新成功！',
              type: 'success'
            });
          }
          else {
            this.$message.error('更新失败，请检查输入类型');
          }
        })
        this.NproductsName = "",
          this.NproductsNum = "",
          this.NproductsDesc = "",
          this.NcategoryId = "",
          this.Nprice = ""
  /*        setTimeout("location.reload()", "2000");*/
      }
    },
    created: function () {
      const that = this;
      axios.get("http://47.110.234.216:7001/get-pros", {
        params: {
          pageNum: 1,
          pageSize: 114514
        }
      }).then(res => {
        console.log(res),
          that.testData = res.data.datas,
          console.log(that.testData)
      })
    }
  }
</script>
<style>
</style>
